<template lang="html">
  <div class="active_new_item">
    <!-- <div class="limit_item" v-if="itemtype === 'limit'"></div> -->
    <div class="new_item" v-if="itemtype === 'new'" @click="goBuy">
      <img v-bind:src="item.product_image" alt="" class="product_img">
      <div class="product_info">
        <h3>{{item.product_short_name}}</h3>
        <div class="prd_tips">{{item.product_tips}}</div>
        <div class="price">
          <span class="new_price">¥{{item.product_unit_price}}</span>
          <span class="old_price"><em>日常价¥{{item.product_market_price}}</em></span>
        </div>
        <div class="product_bottom">
          <div class="progress">
            <p>剩余{{item.quantity - item.product_sale_num}}</p>
            <span><em :style="{width: rate + '%'}"></em></span>
          </div>
          <div class="btns">
            <span class="province" v-if="is_vip && item.share_profit">购买省</span>
            <span v-if="is_vip && item.share_profit" @click.stop="sharePrd">分享赚</span>
            <span class="buy" v-if="!is_vip || (is_vip && !item.share_profit)">立即抢购</span>
          </div>
        </div>
      </div>
    </div>
    <div class="new_item" v-if="itemtype === 'limit'" @click="goBuy">
      <img v-bind:src="item.product_image" alt="" class="product_img">
      <div class="product_info">
        <h3>{{item.product_short_name}}</h3>
        <div class="prd_tips">{{item.product_tips}}</div>
        <div class="price" v-if="!is_vip">
          <span class="new_price">¥{{item.product_unit_price}}</span>
          <span class="old_price"><em>日常价¥{{item.product_market_price}}</em></span>
        </div>
        <div class="vip_price" v-if="is_vip">
          <span class="price">日常价¥{{item.product_market_price}}</span>
          <span class="save_price"><em>¥{{item.product_unit_price}}</em></span>
        </div>
        <div class="product_bottom">
          <div class="progress">
            <p>剩余{{item.quantity - item.product_sale_num}}</p>
            <span><em :style="{width: rate + '%'}"></em></span>
          </div>
          <div class="btns">
            <span class="province" v-if="is_vip && item.share_profit">购买省</span>
            <span v-if="is_vip && item.share_profit" @click.stop="sharePrd">分享赚</span>
            <span class="buy" v-if="!is_vip || (is_vip && !item.share_profit)">立即抢购</span>
          </div>
        </div>
      </div>
    </div>
    <van-actionsheet cancel-text="取消" class="share" v-model="is_open_share" get-container=".exclusive_page" :safe-area-inset-bottom="true">
      <Share :item="item"></Share>
    </van-actionsheet>
  </div>
</template>

<script>
import Share from '@/components/global/share.vue'
export default {
  props: ['itemtype', 'item', 'user_info'],
  components: { Share },
  data () {
    return {
      rate: 0,
      is_vip: false,
      is_open_share: false
    }
  },
  created () {
    if (this.$props.item) {
      var item = this.$props.item
      var rate = item.product_sale_num / item.quantity * 100
      this.rate = rate.toFixed(0)
    }
    if (this.user_info && this.user_info.lev_code === 'COMMON_USER') {
      this.is_vip = false
    } else if (this.user_info.lev_code !== 'COMMON_USER') {
      this.is_vip = true
    }
  },
  methods: {
    goBuy () {
      let isMini = sessionStorage.getItem('isMini')
      let item = this.item
      let params = '?pid=' + item.product_id + '&item_id=' + item.item_id + '&activity_id=' + item.activity_id + '&activity_name=' + item.activity_name
      if (isMini) {
        window.wx.miniProgram.navigateTo({ url: '/pages/shopDetails/shopDetails' + params })
      } else {
        this.$router.push('/main/shopDetails' + params)
      }
    },
    sharePrd () {
      let isMini = sessionStorage.getItem('isMini')
      let item = this.item
      let params = '?pid=' + item.product_id + '&item_id=' + item.item_id
      if (isMini) {
        window.wx.miniProgram.navigateTo({ url: '/pages/shopDetails/shopDetails' + params })
      } else {
        this.is_open_share = !this.is_open_share
      }
    }
  }
}
</script>

<style lang="css" scoped>
</style>
